<template>
    <transition name="el-fade-in">
        <div class="container"
            v-show="show">
            <div class="head">
                <span class="title">
                    报警详情
                </span>
                <span class="close"
                    @click="closeInfo">
                    X
                </span>
            </div>

            <ul class="context">
                <li class="list-item"
                    v-for="item in warnInfo.infoList"
                    :key="item.name">
                    <span class="name">{{item.name}}</span>
                    <span class="value">{{item.value}}</span>
                </li>

            </ul>
        </div>
    </transition>

</template>
<script>
export default {
    name: 'WarningDetail',
    props: {
        show: Boolean,
        warnInfo: Object
    },
    methods: {
        closeInfo() {
            this.$emit('close');
        }
    }
};
</script>
<style scoped>
.container {
    width: 6rem;
    position: absolute;
    left: 5rem;
    top: 1rem;
    background-color: #015aa7;
}
.head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.3rem;
}
.title {
    font-size: 0.5rem;
    margin-left: 0.5rem;
}
.close {
    width: 0.4rem;
    height: 0.5rem;
    background-color: red;
    margin-right: 0.2rem;
    padding: 0.1rem 0.1rem;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
}
.context {
    padding-left: 0;
}
.list-item {
    display: flex;
    justify-content: space-between;
    margin: 0.1rem 0.3rem;
}
.list-item .name {
    width: 35%;
}
.list-item .value {
    width: 60%;
}
</style>
